<template>

  <!-- <div style="height: 1179px"> -->
  <div class="">
    <Top />
    <MainContent />
    <!-- <div class="main-part">
      <div class="main-part-bg"></div>
    </div> -->
    <!-- 11 -->

  <div class="back-groun">
    <div class="bac-im">
      <div style="width: 1200px; margin: 0 auto">
        <div class="Interfac-l">
          <span class="Interfac-im"
            ><img src="../../img/jiekou/路径 248.png" alt=""
          /></span>
          接口专区
        </div>
        <div class="Inter">
          <el-button type="warning">搜索</el-button>
        </div>
        <div class="Interfa-r">
          <el-input v-model="input" placeholder="请输入内容"></el-input>
        </div>
      </div>
    </div>
    <div class="back">下载专区</div>

  </div>
</template>

<script>

// import Top from "./components/Top.vue";
import MainContent from "./components/MainContent.vue";
export default {
  components: {
    // Top,
    MainContent,
  },
  data() {
    return {
      // arr: [],
      // keyword: "", //搜索关键词
      // page: 1, //默认当前页 是第一页
      // pageSize: 20, //默认每页显示20条
      // total: 0, //总条数
    };
  },
  mounted() {
    // // 发送我们的请求，数组是共享数据，我们要把写在父组件中。
    // this.initHome();
  },
  methods: {
    // parentpagesize(val) {
    //   //切换pagesize事件
    //   this.pageSize = val;
    //   this.page = 1;
    //   this.initHome();
    // },
    // parentpage(val) {
    //   //切换页码事件
    //   this.page = val;
    //   this.initHome();
    // },
    // parentSearch(val) {
    //   //子组件触发父组件 传参   {\"name\":123}
    //   this.keyword = val;
    //   this.initHome();
    // },
    // // 首屏查询接口，一般跟搜索是共用一个接口的
    // // 首屏查询接口，一般跟我们分页器也是绑定的关系  我们只需要加俩字段就可以
    // // 支持分页  page当前页 pageSize一页多少条
    // initHome() {
    //   var params = {
    //     keyword: this.keyword,
    //     page: this.page,
    //     pageSize: this.pageSize,
    //   };
    //   getHomeApi(params).then((res) => {
    //     console.log(res);
    //     if (res.code == 200) {
    //       this.arr = res.data;
    //       this.total = res.total;
    //     }
    //   });
    // },
  },
};
</script>

<style lang="less" scoped>
.top-box {
  // position: -webkit-sticky;
  position: sticky;
  top: 0;
}
.main-part {
  position: relative;
  // padding-top: 25px;
  .main-part-bg {
    position: absolute;
    width: 100%;
    height: 613px;
    background: linear-gradient(180deg, #d9eaff 0%, #ffffff 100%);
    border-radius: 0px 0px 0px 0px;
    opacity: 1;
  }
}
// ::v-deep {
//   .el-main {
//     overflow: visible !important;
//     // position: relative;
//     // padding: 0;
//   }
// }

</style>

<style less scoped>
/* 接口专区搜索 */
.back-groun {
  width: 100%;
  height: 100%;
  background-image: linear-gradient(#f2f8ff, #fff);
  /* background-color: #ccc; */
}
.back {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
}
.bac-im {
  width: 100%;
  height: 100px;
  background-image: url("../../img/shouye/组 267.png");
}
.Interfac-l {
  float: left;
  line-height: 100px;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  /* background-color: red; */
}
.Interfac-im {
  display: inline-block;
  width: 30px;
  height: 100%;
  /* background-color: rgb(73, 43, 43); */
}

.Interfa-r {
  width: 289px;
  float: right;
  line-height: 100px;
  /* background-color: red; */
}
.Inter {
  width: 44px;
  float: right;
  line-height: 100px;
}
::v-deep .el-input__inner,
.el-button--small {
  border-radius: 0;
}
/* 接口专区搜索 */
</style>
